<script lang="ts">
export default {
  name: "Line"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, reactive } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { postProjectActive, postProjectActiveNum } from "/@/api/analysis";

const line = ref<HTMLElement | null>(null) as any;
let pvData = reactive({
  monthEnd: "",
  monthAvg: "",
  monthMax: "",
  monthMaxDate: "",
  monthStart: "",
  monthSum: ""
});

let echartInstance: ECharts;

let xAxisData = ref([]);
let seriesData = ref([]);

let timeValue = ref(null);

let formInline = reactive({
  startDate: "",
  endDate: ""
});

// let pickerOption = reactive({
//   disabledDate(time) {
//     return time.getTime() > Date.now() - 8.64e6;
//   }
// });

const disabledDate = time => {
  return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e7就是不可以选择今天的
};

const handleChangeDate = item => {
  console.log(item, "date");
  if (item) {
    formInline.startDate = item[0];
    formInline.endDate = item[1];
  } else {
    formInline.startDate = "";
    formInline.endDate = "";
  }
  initProjectNum();
  initActiveNum();
};

function initechartInstance(xAxisData, seriesData) {
  const echartDom = document.querySelector(".line");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    color: ["#59a0ff", "#00e6ad", "#ffc500"],
    grid: {
      // bottom: "20%",
      // height: "68%",
      // containLabel: true
    },
    legend: { left: "right" },
    tooltip: {
      trigger: "item"
    },
    xAxis: {
      type: "category",

      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        width: "70",
        overflow: "truncate",
        show: true,
        rotate: -24
      },
      data: xAxisData
    },
    yAxis: {
      type: "value"
    },
    series: seriesData
    // [
    //   {
    //     name: "pv",
    //     data: [39, 204, 345, 260, 235],
    //     type: "line"
    //     // areaStyle: {}
    //   },
    //   {
    //     name: "uv",
    //     data: [20, 39, 98, 143, 279],
    //     type: "line"
    //     // areaStyle: {}
    //   }
    // ]
  });
}
const initActiveNum = async () => {
  try {
    const { code, data } = await postProjectActiveNum(formInline);
    if (code === 200) {
      console.log(data);
      const {
        monthEnd,
        monthAvg,
        monthMax,
        monthMaxDate,
        monthStart,
        monthSum
      } = data;

      pvData.monthEnd = monthEnd;
      pvData.monthAvg = monthAvg;
      pvData.monthMax = monthMax;
      pvData.monthMaxDate = monthMaxDate;
      pvData.monthStart = monthStart;
      pvData.monthSum = monthSum;
    }
  } catch (err) {
    console.log(err);
  }
};

const initProjectNum = async () => {
  try {
    const { code, data } = await postProjectActive(formInline);
    if (code === 200) {
      xAxisData.value = data.xAxisData;
      const dataKey = Object.keys(data.multiSeriesData);
      seriesData.value = dataKey.map(item => {
        return {
          name: item,
          data: data.multiSeriesData[item],
          type: "line",
          label: {
            show: true
          }
        };
      });
      nextTick(() => {
        initechartInstance(xAxisData.value, seriesData.value);
      });
    }
  } catch (err) {
    console.log(err);
  }
};

initProjectNum();
initActiveNum();

onMounted(() => {
  nextTick(() => {
    addResizeListener(line.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(line.value, resetRender);
});
</script>

<template>
  <el-card>
    <div class="top-title">
      {{ pvData.monthStart }}~{{ pvData.monthEnd }} 期间，本月系统累计访问量：{{
        pvData.monthSum
      }}，系统日均访问量{{ pvData.monthAvg }}次/天，峰值：{{
        pvData.monthMaxDate
      }}，{{ pvData.monthMax }}次。
    </div>
  </el-card>
  <br />

  <el-card>
    <div ref="line" class="line-wrap">
      <div class="title">
        <slot> </slot>
      </div>
      <div class="top-data-select">
        <el-date-picker
          class="width-custom220"
          v-model="timeValue"
          :disabledDate="disabledDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="handleChangeDate"
        />
      </div>
      <div class="line"></div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.line-wrap {
  position: relative;
}
.title {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 20px;
}
.top-data-select {
  position: absolute;
  top: 0px;
  right: 0px;

  // display: flex;
  // justify-content: flex-end;
  // align-items: flex-start;
}
.line {
  width: 100%;
  height: 35vh;
}
</style>
